<template>
	<el-tabs class="pageTabs">
		<el-tab-pane label="基础设置">
			<div class="sc-setting">
				<div class="sc-setting-item">
					<div class="label">产品标识</div>
					<div class="view"><el-avatar shape="square" :size="50">U</el-avatar></div>
					<div class="option"><el-link disabled>修改标识</el-link><p>标识一年允许修改3次</p></div>
				</div>
				<div class="sc-setting-item">
					<div class="label">产品名称</div>
					<div class="view">SCUI-UC</div>
					<div class="option"><el-link>修改名称</el-link></div>
				</div>
				<div class="sc-setting-item">
					<div class="label">产品官网</div>
					<div class="view"><el-link type="primary" href="https://gitee.com/lolicode/scui-uc" target="_blank">https://gitee.com/lolicode/scui-uc</el-link></div>
					<div class="option"><el-link>设置</el-link><p>产品官网在PC端顶部显示，便于用户从吐个槽返回产品首页</p></div>
				</div>
			</div>
		</el-tab-pane>
		<el-tab-pane label="高级设置">
			<div class="sc-setting">
				<div class="sc-setting-item">
					<div class="label">是否关闭平台</div>
					<div class="view">开启中</div>
					<div class="option"><el-switch v-model="open"></el-switch><p>关闭后普通用户将无法访问</p></div>
				</div>
				<div class="sc-setting-item">
					<div class="label">是否允许游客身份</div>
					<div class="view">允许</div>
					<div class="option"><el-switch v-model="guest"></el-switch></div>
				</div>
				<div class="sc-setting-item">
					<div class="label">平台秘钥(SassKey)</div>
					<div class="view">0SQiHtrk8POBU2YD</div>
					<div class="option"><p style="margin: 0;">密钥(SassKey)用于接入数据等API的唯一凭证</p></div>
				</div>
			</div>
		</el-tab-pane>
	</el-tabs>
</template>

<script>
	export default {
		data() {
			return {
				open: true,
				guest: false
			}
		}
	}
</script>


<style scoped>
	.sc-setting {}
	.sc-setting-item {border-bottom: 1px solid #eee;display: flex;}
	.sc-setting-item > div {padding:20px;}
	.sc-setting-item .label {width: 200px;color: #999;}
	.sc-setting-item .view {width: 400px;}
	.sc-setting-item .option {flex: 1;text-align: right;}
	.sc-setting-item .option p {font-size: 13px;color: #999;margin-top: 10px;}
</style>
